<template>
    <div class="content">
        <div v-if="!props.unSelectList.includes(props.materialType)" class="account">
            <!-- <div class="account_card" v-if="isConfigured">
        <div class="head">
          <Image :width="60" :height="60" :src="imageSrc" :defaultSrc="`/static/file/${props.accountType === 2 ? 'miniApp' : 'official'}.png`" />
          <div class="accountName">
            <div class="name">{{ accountName }}</div>
            <div class="accountType" v-if="props.accountType === 1">{{ officialAccountsType }}</div>
          </div>
        </div>
        <div class="mark">
          <el-icon><Check /></el-icon>
        </div>
      </div> -->
            <div v-if="!isConfigured" class="default">
                <span>{{ props.accountType === 2 ? minTipText : officTipText }}</span>
            </div>
        </div>
        <div v-if="props.materialType === 7 && !notSetOffic" class="notConfig">
            未配置公众号不能通过公众号分享，请在列表上完成配置
        </div>
        <div v-if="props.materialType === 8 && !isConfigured" class="notConfig">
            <span>{{ props.accountType === 2 ? minTipText : officTipText }}</span>
        </div>
        <div class="shareLink">
            <div class="qr">
                <div class="qr_title">二维码</div>
                <div class="qr_image">
                    <Image :width="100" :height="100" :src="qrSrc" />
                    <div v-if="isConfigured" class="mask">
                        <el-button color="#FF6B00" plain @click="download">下载</el-button>
                    </div>
                </div>
                <div class="qr_footer">微信扫一扫</div>
            </div>
            <div class="line"></div>
            <div class="link">
                <div class="link_title">链接分享</div>
                <div class="link_self">
                    <el-input v-model="link_url" disabled />
                    <el-button :disabled="!link_url" color="#FF6B00" plain @click="copy">复制</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import useClipboard from 'vue-clipboard3';
import { ElMessage } from 'element-plus';
import Image from './Image.vue';
import { getConfigOAAndMP, generateRadarShare } from '@/api/content/channelFootage/common';
import { downFile } from '@/utils/utils';
import { endLoading } from '@/utils/request';

const router = useRouter();
const { toClipboard } = useClipboard();

// 未配置小程序文案
const minTipText = '未配置小程序不能通过小程序分享，请在列表上完成配置';
// 未配置公众号文案
const officTipText = '未配置公众号不能通过公众号分享，请在列表上完成配置';

const props = withDefaults(
    defineProps<{
        unSelectList: number[]; // 不需要选择账号类型的列表
        accountType: number; //  分享的账号类型（小程序 2  公众号 1）
        materialType: number; //  分享的素材类型 1-文本 2-图片 3-音频 4-视频 5-文件 6-链接文章 7-链接引用 8-抽奖裂变 9-短链
        media_content_id: number;
    }>(),
    {
        unSelectList: () => [7, 8],
        accountType: 2,
        materialType: 1,
        media_content_id: 0
    }
);

const accountInfo = ref<any>(null);
const qrSrc = ref<string>('');
const link_url = ref<string>('');

// 公众号未配置
const notSetOffic = computed(() => {
    return accountInfo.value?.is_set_official === 2;
});

const isConfigured = computed(() => {
    let flag = false;
    switch (props.accountType) {
        case 2:
            flag = accountInfo.value?.is_set_mini === 2;
            break;
        case 1:
            flag = accountInfo.value?.is_set_official === 2;
            break;
    }
    return flag;
});
const imageSrc = computed(() => {
    let src = '';
    switch (props.accountType) {
        case 2:
            src = accountInfo.value?.mini_head_img;
            break;
        case 1:
            src = accountInfo.value?.official_head_img;
            break;
    }
    return src;
});
const accountName = computed(() => {
    let name = '';
    switch (props.accountType) {
        case 2:
            name = accountInfo.value.mini_app_name;
            break;
        case 1:
            name = accountInfo.value.official_account_name;
            break;
    }
    return name;
});
const officialAccountsType = computed(() => {
    let type = '';
    const types = [
        {
            id: 0,
            name: '订阅号'
        },
        {
            id: 1,
            name: '订阅号'
        },
        {
            id: 2,
            name: '服务号'
        }
    ];
    if (props.accountType === 1) {
        type = types.find(item => item.id === accountInfo.value.service_type_info)?.name || '';
    }
    return type;
});

const emit = defineEmits(['configure', 'update:accountType']);

watch(
    () => props.accountType,
    async val => {
        qrSrc.value = '';
        link_url.value = '';
        if (isConfigured.value) {
            await generateRadarShareFn();
        }
    }
);

const generateRadarShareFn = async () => {
    try {
        const media_content_id = props.media_content_id;
        const type = props.accountType;
        const media_type = props.materialType;
        const miniprogram_id = accountInfo.value.mini_program_id;
        const official_account_id = accountInfo.value.official_account_id;
        const work_user_id = '';
        const params = { media_content_id, type, media_type, miniprogram_id, official_account_id, work_user_id };
        const { share_info } = await generateRadarShare(params);
        qrSrc.value = share_info.qr_code_url;
        link_url.value = share_info.link_url;
    } catch (error) {
    } finally {
        endLoading();
    }
};

const getConfigOAAndMPFn = async () => {
    try {
        const params = { media_type: props.materialType }; // 1-文本 2-图片 3-音频 4-视频 5-文件 6-链接文章 7-链接引用 8-抽奖裂变 9-短链
        accountInfo.value = await getConfigOAAndMP(params, true);
        const flag1 = props.accountType == 1 && accountInfo.value?.is_set_official != 2;
        const flag2 = props.accountType == 2 && accountInfo.value?.is_set_mini != 2;
        if (flag1 || flag2) {
            endLoading();
        }
    } catch (error) {
        endLoading();
    }
};

const toConfigure = () => {
    let path = '';
    switch (props.accountType) {
        case 2:
            path = '/channelconfig/qywechat/marketingApplet';
            break;
        case 1:
            path = '/channelconfig/officeAccount/oaManage';
            break;
    }
    router.push({ path });
};

const download = () => {
    qrSrc.value && downFile(qrSrc.value, '');
};

const copy = async () => {
    try {
        await toClipboard(link_url.value);
        ElMessage.success('复制成功');
    } catch (e) {
        ElMessage.error('复制失败');
    }
};

onMounted(async () => {
    if (props.materialType === 7) {
        emit('update:accountType', 1);
    }
    await getConfigOAAndMPFn();
    qrSrc.value = '';
    link_url.value = '';
    if (isConfigured.value) {
        await generateRadarShareFn();
    }
});
</script>

<style lang="scss" scoped>
.content {
    .account {
        margin-bottom: 18px;

        .account_card {
            width: 252px;
            padding: 10px;
            border-radius: 6px;
            border: #eee 1px solid;
            box-shadow: 0 0 10px #f6f6f6;
            position: relative;
            overflow: hidden;
            border-color: #ff6b00;

            .head {
                display: flex;
                align-items: center;

                .accountName {
                    flex: 1;
                    width: 0;
                    margin-left: 8px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    .name {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: 12px;
                        font-weight: 700;
                        color: #333;
                    }

                    .accountType {
                        width: 56px;
                        margin-top: 10px;
                        line-height: 1;
                        height: 20px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 12px;
                        color: #333;
                        background-color: #ecf4fb;
                        border: 1px solid #b5cffc;
                    }
                }
            }

            .mark {
                position: absolute;
                top: 0;
                right: 0;
                width: 36px;
                height: 36px;
                background: linear-gradient(225deg, #ff6b00, #ff6b00 50%, transparent 50%, transparent 100%);

                .el-icon {
                    color: #fff;
                    font-size: 20px;
                    position: absolute;
                    top: 1px;
                    right: 1px;
                }
            }
        }

        .default {
            display: flex;
            align-items: center;

            span {
                font-size: 13px;
                line-height: 1;
                color: #999;
            }

            .toConfigure {
                color: #ff6b00;
                font-weight: 600;

                &:hover {
                    cursor: pointer;
                    color: #f98126;
                }
            }
        }
    }

    .notConfig {
        font-size: 13px;
        line-height: 1;
        color: #999;
        margin-bottom: 15px;
    }

    .shareLink {
        border: 1px solid #eee;
        border-radius: 6px;
        padding: 18px 10px;

        // height: 30px;
        display: flex;

        .qr {
            width: 140px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .qr_title {
                color: #333;
                font-weight: 500;
            }

            .qr_image {
                width: 100px;
                height: 100px;
                margin: 8px 0;
                position: relative;

                &:hover {
                    cursor: pointer;

                    .mask {
                        visibility: visible;
                    }
                }

                .el-image {
                }

                .mask {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100px;
                    height: 100px;
                    background-color: rgba(#999, 0.5);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    visibility: hidden;
                }
            }

            .qr_footer {
                font-size: 12px;
                color: #888;
            }
        }

        .line {
            border-left: 1px #ddd dashed;
            margin: 0 12px;
        }

        .link {
            flex: 1;
            padding: 0 14px;

            .link_title {
                color: #333;
                font-weight: 500;
            }

            .link_self {
                display: flex;
                align-items: center;
                margin-top: 8px;

                .el-button {
                    margin-left: 12px;
                }
            }
        }
    }
}
</style>
